<template>
  <v-app :class="blogTheme">
    <NavBar></NavBar>
    <ButtonGroup></ButtonGroup>
    <v-main :style="cover">
      <router-view class="animated animate__fadeInUp"/>
    </v-main>
    <Footer></Footer>
  </v-app>
</template>

<script>
import NavBar from './layout/NavBar'
import Footer from './layout/Footer'
import ButtonGroup from './components/ButtonGroup'
import { mapGetters } from 'vuex'

export default {
  name: 'App',

  components: { NavBar, Footer, ButtonGroup },

  computed: {
    ...mapGetters(['blogTheme']),
    cover () {
    // 定义要拼接的CSS
      const cover = ''
      // 如果开启了背景
      // if () {
      // }
      // 返回对应的CSS
      return 'background: url(' + cover + ') center center / cover no-repeat;background-attachment: fixed;'
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
